<div class="info">
  <!--    订单信息-->
  <div>
    <h2>订单信息</h2>
    <nz-row>
      <nz-col nzSpan="24">
        <span class="label">订单编号</span>
        <span>{{detail.orderNum}}</span>
        <app-button-copy [text]="detail.orderNum"></app-button-copy>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="24">
        <span class="label">订单状态</span>
        <span [attr.statusColor]="detail.status">{{maintainBlueprintService.ORDERSTATUS[detail.status]}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    买家信息-->
  <div>
    <h2>
      买家信息
      <app-button-copy [text]="'买家账号：'+detail.userId+' 买家电话：'+detail.userId"></app-button-copy>
    </h2>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">买家账号</span>
        <span>{{detail.userId}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">买家电话</span>
        <span>{{detail.userPhone}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    收款信息-->
  <div>
    <h2>收款信息</h2>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">实收金额</span>
        <span>{{detail.realPrice}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">收款状态</span>
        <span>{{maintainBlueprintService.PAYSTATUS[detail.refundState]}}</span>
      </nz-col>
      <nz-col nzSpan="12">
        <span class="label">第三方流水号</span>
        <span [nzTooltipTitle]="detail.payOrderNum" nzTooltipPlacement="topCenter"
              nz-tooltip>{{detail.payOrderNum}}</span>
        <app-button-copy *ngIf="detail.payOrderNum" [text]="detail.payOrderNum"></app-button-copy>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">官方价</span>
        <span>{{detail.goodsOriginalPrice}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">收款方式</span>
        <span>{{maintainBlueprintService.PAYTYPE[detail.payType]}}</span>
      </nz-col>
      <nz-col nzSpan="12">
        <span class="label">支付商家编号</span>
        <span [nzTooltipTitle]="detail.paymentMerchantNo" nzTooltipPlacement="topCenter"
              nz-tooltip>{{detail.paymentMerchantNo}}</span>
        <app-button-copy *ngIf="detail.paymentMerchantNo" [text]="detail.paymentMerchantNo"></app-button-copy>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">优惠金额</span>
        <span>{{detail.favorablePrice}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">付款时间</span>
        <span>{{detail.payTime}}</span>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">爱豆</span>
        <span>{{detail.aiDouAmount}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    退款信息-->
  <div>
    <h2>退款信息</h2>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">爱豆</span>
        <span>{{detail.refundAiDouAmount}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">金额</span>
        <span>{{detail.refundPrice}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    商品信息-->
  <div>
    <h2>商品信息</h2>
    <nz-row>
      <nz-col nzSpan="6">
        <span class="label">商品</span>
        <span>{{detail.goodsName}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">产品规格</span>
        <span>{{detail.goodsSpec}}</span>
      </nz-col>
      <nz-col nzSpan="6">
        <span class="label">开通方式</span>
        <span>{{detail.goodsType === 0 ? '购买' : '免费赠送'}}</span>
      </nz-col>
    </nz-row>
  </div>
  <!--    出库明细-->
  <div>
    <h2>跟进记录</h2>
    <nz-table [nzPageSize]="9999"
              nzShowPagination="false"
              nzOuterBordered="true">
      <thead>
      <tr>
        <th nzAlign="center">id</th>
        <th nzAlign="center">跟进时间</th>
        <th nzAlign="center">跟进人</th>
        <th nzAlign="center">跟进内容</th>
        <th nzAlign="center">附件</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of trackList;let index=index">
        <td nzAlign="center">{{data['id']}}</td>
        <td nzAlign="center">{{data['createTime']}}</td>
        <td nzAlign="center">{{data['follower']}}</td>
        <td nzAlign="center">{{data['content']}}</td>
        <td nzAlign="center">
          <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
            <a *ngIf="data['enclosure']" [href]="data['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
          </div>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div class="btnRow">
    <button nz-button nzType="primary" (click)="showTrackModal()">跟进</button>
    <button nz-button nzType="primary" (click)="showAfterSalesRefundModal(detail.id)">售后退款</button>
  </div>
</div>

<!--跟进模态框-->
<nz-modal
  [(nzVisible)]="trackModal.visible"
  nzTitle="跟进"
  (nzOnCancel)="hideTrackModal(false)"
  (nzOnOk)="hideTrackModal(true)"
  [nzOkLoading]="trackModal.loading"
>
  <ng-container *nzModalContent>
    <textarea rows="4" nz-input placeholder="请输入跟进内容" style="width: 100%" [(ngModel)]="trackModal.remark"></textarea>
    <div style="margin-top: 8px">
      <nz-upload [(nzFileList)]="trackModal.file" [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
                 [nzBeforeUpload]="beforeUpload">
        <button nz-button>
          选择文件
        </button>
        <span>请选择图片、office文件、PDF文件</span>
      </nz-upload>
    </div>
    <nz-row style="margin-top: 8px" *ngIf="trackList.length">
      <h3>跟进信息</h3>
      <nz-row class="customTable">
        <nz-row class="tableHead">
          <nz-col nzSpan="2">id</nz-col>
          <nz-col nzSpan="6">跟进时间</nz-col>
          <nz-col nzSpan="4">跟进人</nz-col>
          <nz-col nzSpan="8">跟进内容</nz-col>
          <nz-col nzSpan="4">附件</nz-col>
        </nz-row>
        <div class="tableContent" style="max-height: 404px;overflow-y: auto;width: 100%">
          <nz-row class="tableRow" *ngFor="let item of trackList;let index=index">
            <nz-col nzSpan="2">{{item['id']}}</nz-col>
            <nz-col nzSpan="6">{{item['createTime']}}</nz-col>
            <nz-col nzSpan="4">{{item['follower']}}</nz-col>
            <nz-col nzSpan="8">{{item['content']}}</nz-col>
            <nz-col nzSpan="4" style="white-space: pre-wrap;">
              <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                <a *ngIf="item['enclosure']" [href]="item['enclosure']" style="color: #008dff" target="_blank">点击查看</a>
              </div>
            </nz-col>
          </nz-row>
        </div>
      </nz-row>
    </nz-row>
  </ng-container>
</nz-modal>

<!--售后退款-->
<nz-modal
  [(nzVisible)]="afterSalesRefundModal.visible"
  nzTitle="审核"
  (nzOnCancel)="hideAfterSalesRefundModal()">
  <div *nzModalContent>
    <div class="searchItem">
      <label for="afterSalesRefundModalPrice"><span>*</span>退款金额（元）：</label>
      <input id="afterSalesRefundModalPrice" nz-input placeholder="请输入退款金额" [(ngModel)]="afterSalesRefundModal.price"/>
    </div>
    <div class="searchItem afterSalesRefundModal">
      <label for="afterSalesRefundModalRemark">备注：</label>
      <textarea
        id="afterSalesRefundModalRemark"
        nz-input
        [maxLength]="100"
        [(ngModel)]="afterSalesRefundModal.remark"
        placeholder="请输入备注"
        [nzAutosize]="{ minRows: 2, maxRows: 6 }"
      ></textarea>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideAfterSalesRefundModal()">取消</button>
    <button nz-button nzType="primary" (click)="refund()">确认</button>
  </div>
</nz-modal>
